<template>
    <modal id="ph-confirm" 
        :title="data.title" 
        :content="data.content" 
        :visible="data.visible" 
        :alpha="false">
        <template v-slot:action>
            <ph-button :radius="true" @click="onClose">{{data.cancelText}}</ph-button>
            <ph-button :radius="true" type="primary" @click="onDone">{{data.doneText}}</ph-button>
        </template>
    </modal>
</template>
<script lang="ts">
import { defineComponent , reactive} from 'vue'
import Modal from './base.vue'
import Evt from 'ph-evt'
import {PhButton} from '../base'
import { PhConfirmAction, PhConfirmOpt, PhModelShowRetrun } from './index.type'

const ACTION = "confirm-done"

export default defineComponent({
    name:"Confirm",
    components:{Modal,PhButton},
    setup(){
        const evt = new Evt()
        const data = reactive<{
            title?:string,
            visible?:boolean,
            content:string,
            doneText?:string,
            cancelText?:string,
        }>({
            title:"",
            visible:false,
            content:"",
            doneText:"确定",
            cancelText:"关闭"
        })
        const open = (content:string,title="系统提示",opt:PhConfirmOpt={}):PhModelShowRetrun =>{
            data.title = title
            data.content = content
            data.visible = true
            data.doneText = opt.doneText||data.doneText
            data.cancelText = opt.cancelText||data.cancelText
            return {
                done(fn:(a:PhConfirmAction)=>void){
                    evt.once(ACTION,fn)
                }
            }
        }
        const close = ()=>{
            data.visible = false;
        }
        const onDone = ()=>{
            evt.emit(ACTION,PhConfirmAction.Done)
            close()
        }
        const onClose = ()=>{
            evt.emit(ACTION,PhConfirmAction.Cancel)
            close()
        }
        return {data,onDone,onClose,open}
    },
    
})
</script>